<template>
   <el-dialog title="选择角色" v-model="visibleDialog" width="600px" append-to-body class="promoter_person">
      <div class="person_body clear">
          <div class="person_tree l">
              <input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)">
              <ul>
                  <li v-for="(item,index) in roles" :key="index+'b'" class="check_box not"
                      :class="$func.toggleClass(checkedRoleList,item,'roleId')&&'active'"
                      @click="checkedRoleList=[item]">
                    <a :title="item.description">
                      <!--                        <img src="/assets/images/icon_role.png">-->
                      {{ item.roleName }}</a>
                  </li>
              </ul>
          </div>
          <div class="has_selected l">
              <p class="clear">已选（{{total}}）
                  <a @click="delList">清空</a>
              </p>
              <ul>
                  <li v-for="(item,index) in checkedRoleList" :key="index+'e'">
                    <!--                      <img src="/assets/images/icon_role.png">-->
                      <span>{{item.roleName}}</span>
                    <!--                      <img src="/assets/images/cancel.png" @click="$func.removeEle(checkedRoleList,item,'roleId')">-->
                  </li>
              </ul>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import { computed, ref ,watch } from 'vue-demi'

export default {
  props:['visible','data'],
  emits:["visible",'change'],
  setup(props,ctx){
    let checkedRoleList=ref([])
    let visibleDialog =ref(false)
      let searchVal=ref('')
      let activeName =ref('1')
      let departments=ref({})
      let roles=ref([])
      function puxiao(){
          ctx.emit('update:visible',false)
      }
    watch(props.visible,(val)=>{
        this.visibleDialog = this.visible
        if(val){
            this.getRoleList();
            this.searchVal = "";
            this.checkedRoleList = this.data.map(({name,targetId})=>({
            roleName: name,
            roleId: targetId
            }));
        }
    })
    let total =computed(()=>{
        return checkedRoleList.value.length
    })
    watch(visibleDialog,(val)=>{
        ctx.emit('update:visible',val)
    })
    function saveDialog(){
      let checkedList = checkedRoleList.value.map(item=>({
        type: 2,
        targetId: item.roleId,
        name: item.roleName
      }))
      ctx.emit('change',checkedList)
    }
    function delList(){
      checkedRoleList.value=[];
    }
    return {
      checkedRoleList,
      visibleDialog,
      searchVal,
      activeName,
      departments,
      roles,
      puxiao,
      total,
      saveDialog,
      delList
    }
  }
}
</script>

<style scoped>
.person_body {
  border: 1px solid #f5f5f5;
  height: 500px;
}
.tree_nav span {
  display: inline-block;
  padding-right: 10px;
  margin-right: 5px;
  max-width: 6em;
  color: #38adff;
  font-size: 12px;
  cursor: pointer;
  /*background: url(/assets/images/jiaojiao.png) no-repeat right center;*/
}
.tree_nav span:last-of-type {
  background: none;
}
.person_tree {
  padding: 10px 12px 0 8px;
  width: 280px;
  height: 100%;
  border-right: 1px solid #f5f5f5;
}
.person_tree input {
  padding-left: 22px;
  width: 210px;
  height: 30px;
  font-size: 12px;
  border-radius: 2px;
  border: 1px solid #d5dadf;
  /* background: url(/assets/images/list_search.png) no-repeat 10px center; */
  background-size: 14px 14px;
  margin-bottom: 14px;
}
.person_tree ul,
.has_selected ul {
    height: 420px;
    overflow-y: auto;
}
.person_tree li {
    padding: 5px 0;
}
.person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
  /*background: url(/assets/images/next_level_active.png) no-repeat 10px        center;*/
    border-left: 1px solid rgb(238, 238, 238);
}
.person_tree li a.active + i {
    color: rgb(197, 197, 197);
  /*background-image: url(/assets/images/next_level.png);*/
    pointer-events: none;
}
.person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}

.has_selected {
  width: 276px;
  height: 100%;
  font-size: 12px;
}
.has_selected ul {
  height: 460px;
}
.has_selected p {
  padding-left: 19px;
  padding-right: 20px;
  line-height: 37px;
  border-bottom: 1px solid #f2f2f2;
}
.has_selected p a {
  float: right;
}
.has_selected ul li {
  margin: 11px 26px 13px 19px;
  line-height: 17px;
}
.has_selected li span {
  vertical-align: middle;
}
.has_selected li img:first-of-type {
  width: 14px;
  vertical-align: middle;
  margin-right: 5px;
}
.has_selected li img:last-of-type {
  float: right;
  margin-top: 2px;
  width: 14px;
}
</style>